import React, {CSSProperties,useState,useEffect} from 'react'
import './TabBar.scss'
import {TabBar} from "antd-mobile";
import {MessageOutlined,TeamOutlined,SolutionOutlined} from '@ant-design/icons'
import {withRouter,RouteComponentProps} from "react-router-dom";
const iconStyle: CSSProperties = {
    fontSize: '1rem'
}
const iconActive: CSSProperties = {
    fontSize: '1rem',
    color: '#33A3F4'
}

const MyTabBar = (props: RouteComponentProps) => {
    useEffect(() => {
        switch (props.location.pathname){
            case '/in/chat':
                setSelected('消息');break;
            case '/in/contacts':
                setSelected('联系人');break;
            case '/in/mine':
                setSelected('我的');break;
            default:
                break;
        }
    },[props])
    const [selectedTab,setSelected] = useState<string>('消息')
    const msgPres = () => {
        setSelected('消息')
        props.history.push('/in/chat')
    }
    const conPres = () => {
        setSelected('联系人')
        props.history.push('/in/contacts')
    }
    const minePres = () => {
        setSelected('我的')
        props.history.push('/in/mine')
    }
    return (
        <div className='myTabBar'>
            <TabBar
                unselectedTintColor="#949494"
                tintColor="#33A3F4"
                barTintColor="white"
                >
                <TabBar.Item title='消息' key='消息' selected={selectedTab === '消息'}
                             icon={
                                 <MessageOutlined style={iconStyle} />
                             }
                             selectedIcon={
                                 <MessageOutlined style={iconStyle} />
                             }
                             onPress={msgPres}>
                </TabBar.Item>
                <TabBar.Item title='联系人' key='联系人' selected={selectedTab === '联系人'}
                             icon={
                                 <TeamOutlined className='barIcon' style={iconStyle}/>
                             }
                             selectedIcon={
                                 <TeamOutlined className='barIcon' style={iconActive}/>
                             }
                             onPress={conPres}>
                </TabBar.Item>
                <TabBar.Item title='我的' key='我的' selected={selectedTab === '我的'}
                             icon={
                                 <SolutionOutlined className='barIcon' style={iconStyle}/>
                             }
                             selectedIcon={
                                 <SolutionOutlined className='barIcon' style={iconActive}/>
                             }
                             onPress={minePres}>
                </TabBar.Item>
            </TabBar>
        </div>
    )
}

export default withRouter(MyTabBar)